import React from 'react'
class DropDown extends React.Component{
    constructor(props) {
        super(props);
        this.state = {isOpen: false};
    }
    componentDidMount(){
        document.onclick = () => {
            this.handleNoneClick();
        };
    }
    handleNoneClick(){
        this.setState({isOpen:false});
    }
    handleTitleClick(e){
        e.nativeEvent.stopImmediatePropagation();
        this.setState({isOpen:!this.state.isOpen});
    }
    render(){
        return (
            <ul className="nav navbar-nav navbar-right">
                <li className={this.state.isOpen?"dropdown open":"dropdown"}>
                    <a onClick={(e) => {this.handleTitleClick(e)}}
                       style={{cursor:'pointer'}}
                       className="dropdown-toggle">
                        {this.props.title}
                        <span className="caret"/>
                    </a>
                    <ul className="dropdown-menu">
                        {this.props.children}
                    </ul>
                </li>
            </ul>
        );
    }
}
export default DropDown;